import React, { useRef, useState } from 'react'
import './ScrolltopIndex.scss'

function ScrolltopIndex(props) {
  let { ImageList } = props;

  // 控制是否开始滚动
  const [ImageTranslate, setImageTranslate] = useState(false)
  // 控制滚动时长
  const [scrollTime, setScrollTime] = useState(5)

  // 获取图片元素
  let ImageRef = useRef();

  // 移入事件
  const OverImge = (event) => {
    let ImageHeight = ImageRef.current.offsetHeight
    // 滚动时间
    let scrollTime = Math.floor(ImageHeight / 132);
    setScrollTime(scrollTime)
    setImageTranslate(true)
  }
  // 移出事件
  const OutImge = () => {
    setImageTranslate(false)
  }

  return (
    <div className='Scrolltop-Index'>
      <img src={ImageList} alt="" onMouseOut={OutImge} className={ImageTranslate ? 'ImagesTransfrom' : ''} style={{ width: '100%', animationDuration: `${scrollTime}s` }} ref={ImageRef} onMouseOver={OverImge} />
    </div>
  )
}


export default ScrolltopIndex
